import React, { Component } from 'react';

import { connect } from 'dva';

import QueryForm from './components/query-form';
import DataTable from './components/data-table';
import AddFormModal from './components/add-form-modal';
import EditFormModal from './components/edit-form-modal';

import {
  Button,
  Spin,
} from 'antd';

import {
  messageSuccess,
  modalConfirm,
  CONFIRM_MODAL_OK,
  modalError,
} from 'utils/feedbacks';

import _ from 'lodash';

import styles from './index.css';

/**
 * FTP-列表内容
 */
class Index extends Component {

  render() {
    const {
      systemFtpInitLoading,
      ftpDataTableState,
      systemFtpCreateLoading,
      queryFormState,
      addModalFormState,
      editModalFormState,
    } = this.props;

    return (
      <>
        {
          !!systemFtpInitLoading ?
            <Spin style={{ width: "100%", paddingTop: '25%' }} tip="加载中..." size="large" />
            :
            <div className={styles.content}>
              <div className={styles.header}>
                FTP管理
              </div>
              {/* 查询表单 */}
              <QueryForm
                state={queryFormState}
                onSubmit={this.queryFormSubmittedHandler}
                onReset={this.queryFormResetHandler} />

              {/* 操作按钮 */}
              <div className={styles.btn_bar}>
                <Button type="primary" className={styles.btnstyle} onClick={this.addBtnClickedHandler}>新增</Button>
              </div>

              {/* 表格数据 */}
              <DataTable
                state={ftpDataTableState}
                onPageChange={this.dataTablePageChangedHandler}
                onPageSizeChange={this.dataTablePageSizeChangedHandler}
                onRecordStatusChange={this.dataTableRecordStatusChangedHandler}
                onEdit={this.dataTableEditedHandler} />

              {/* 弹窗: 新增 */}
              {/* <AddFormModal
                ref={component => this.addFormModalRef = component}
                loading={systemFtpCreateLoading}
                modalState={addModalFormState}
                onCancel={this.addFormModelCanceledHandler}
                onConfirm={this.addFormModalConfirmedHandler} /> */}

              {/* 弹窗: 编辑 */}
              {/* <EditFormModal
                modalState={editModalFormState}
                onCancel={this.editFormModelCanceledHandler}
                onConfirm={this.editFormModelConfirmedHandler} /> */}
            </div>
        }
      </>
    )
  }

  /**
   * 新增对话框确认事件
   */
  addFormModalConfirmedHandler = async (fieldsValue) => {
    const { dispatch, authState: { jwt } } = this.props;
    const { account, password, remark, url, status } = fieldsValue;

    // 发起请求, 新增ftp
    await dispatch({
      type: 'pages_home_system_ftp/systemFtpCreate',
      payload: { jwt, account, password, remark, url, status }
    });

    // 更新弹窗状态: 关闭弹窗
    await dispatch({
      type: 'pages_home_system_ftp/addModalFormStateUpdate',
      payload: { visible: false }
    });

    messageSuccess('新增成功');

    // 确认新增后, 将对话框内容清空
    await this.addFormModalRef.getForm().resetFields();

    const { queryFormState, ftpDataTableState: { page, limit } } = this.props;

    // 发送请求, 获取FTP管理列表页数据
    dispatch({
      type: 'pages_home_system_ftp/systemFtpPageSearchList',
      payload: {
        jwt,
        ...queryFormState,
        reqPage: page,
        reqLimit: limit,
      }
    });
  }

  /**
   * 编辑标签点击事件
   */
  dataTableEditedHandler = async (record) => {
    const { dispatch } = this.props;
    const { address, remarks, gmtCreate, password, accountNum } = record;
    //更新编辑表单数据
    await dispatch({
      type: 'pages_home_system_ftp/editFormStateUpdate',
      payload: { address, remarks, gmtCreate, password, accountNum }
    });
    //更新弹窗状态: 打开弹窗
    await dispatch({
      type: 'pages_home_system_ftp/editModalFormStateUpdate',
      payload: { visible: true }
    });
  }

  /**
   * 编辑弹窗 取消按钮点击事件
   */
  editFormModelCanceledHandler = () => {
    const { dispatch } = this.props;

    dispatch({
      type: 'pages_home_system_ftp/editModalFormStateUpdate',
      payload: { visible: false },
    });

    //初始化新增表单数据
    dispatch({
      type: 'pages_home_system_ftp/editFormStateUpdate',
      payload: {
        addFormState: {
          address: '',
          remarks: '',
          accountNum: '',
          password: '',
        }
      }
    });
  }

  /**
   * 确认编辑
   */
  editFormModelConfirmedHandler = async (fieldsValue) => {
    const { dispatch } = this.props;
    const { address, remarks, gmtCreate, password, accountNum } = fieldsValue;

    //更新弹窗状态: 关闭弹窗
    await dispatch({
      type: 'pages_home_system_ftp/editModalFormStateUpdate',
      payload: { visible: false }
    });
    //初始化编辑表单数据
    await dispatch({
      type: 'pages_home_system_ftp/editFormStateUpdate',
      payload: {
        editFormState: {
          address: '',
          remarks: '',
          accountNum: '',
          password: '',
          gmtCreate: '',
        }
      }
    });
    // //发起请求
    // await dispatch({
    //   type: 'pages_home_system_ftp/',
    //   payload: { jwt, address, remarks, status, name, KeyID, KeySecret, gmtCreate }
    // });

    messageSuccess('编辑成功');
    // const { queryFormState } = this.props;

    // //更新表格数据
    // dispatch({
    //   type: 'pages_home_basic_management_course_major/majorList',
    //   payload: { 
    //     jwt,
    //     ...queryFormState,
    //     reqPage: 1, 
    //     reqLimit: 10,
    //   },
    // });
  }

  /**
   * 新增按钮点击事件
   */
  addBtnClickedHandler = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'pages_home_system_ftp/addModalFormStateUpdate',
      payload: {
        visible: true
      }
    });
  }

  /**
   * 条件检索表单：提交
   */
  queryFormSubmittedHandler = (inputJSON) => {
    const { dispatch, authState: { jwt } } = this.props;

    // 调用effects，根据更新后的查询条件，向服务器发送请求(搜索回到第一页)
    dispatch({
      type: 'pages_home_system_ftp/systemFtpPageSearchList',
      payload: {
        jwt: jwt,
        ...inputJSON,
        reqPage: 1,
        reqLimit: 10,
      },
    });
  }

  /**
   * 条件检索表单：重置
   */
  queryFormResetHandler = () => {
    const { dispatch, authState: { jwt } } = this.props;

    // 调用effects，根据更新后的查询条件，向服务器发送请求(搜索回到第一页)
    dispatch({
      type: 'pages_home_system_ftp/systemFtpPageSearchList',
      payload: {
        jwt: jwt,
        reqPage: 1,
        reqLimit: 10,
      },
    });
  }

  /**
   * 状态改变
   */
  dataTableRecordStatusChangedHandler = async (record) => {
    const confirmResult = await modalConfirm('提示', '确认改变该条数据状态吗？');
    if (confirmResult != CONFIRM_MODAL_OK) return;

    const { id, status } = record;
    // const { jwt } = this.props;
    const { dispatch } = this.props;

    // await dispatch({
    //   type: 'pages_home_system_ftp/teacherUpdateStatusById',
    //   payload: { id, status: status == '正常'? 'OFF' : 'ON' }
    // });

    messageSuccess('修改成功');

    // // 重置查询表单
    // await dispatch({ type: 'pages_home_system_ftp/queryFormStateReset' });

    const { queryFormState } = this.props;

    // 刷新列表
    // dispatch({
    //   type: 'pages_home_system_ftp/', 
    //   payload: { ...queryFormState, page: 1, limit: 10, jwt }
    // });
  }

  /**
   * 新增弹窗 取消按钮点击事件
   */
  addFormModelCanceledHandler = () => {
    const { dispatch } = this.props;

    dispatch({
      type: 'pages_home_system_ftp/addModalFormStateUpdate',
      payload: { visible: false },
    });

    //初始化新增表单数据
    dispatch({
      type: 'pages_home_system_ftp/addFormStateUpdate',
      payload: {
        addFormState: {
          address: '',
          remarks: '',
          name: '',
          KeyID: '',
          KeySecret: '',
        }
      }
    });
  }

  /**
   * DataTable：翻页
   */
  dataTablePageChangedHandler = (page, limit) => {
    const { dispatch, queryFormState, authState: { jwt } } = this.props;
   
    dispatch({
      type: 'pages_home_system_ftp/systemFtpPageSearchList',
      payload: {
        jwt: jwt,
        ...queryFormState,
        reqPage: page,
        reqLimit: limit,
      },
    });
  }

  /**
   * DataTable：改变页面显示记录数
   */
  dataTablePageSizeChangedHandler = (page, limit) => {
    const { dispatch, queryFormState, authState: { jwt } } = this.props;
   
    dispatch({
      type: 'pages_home_system_ftp/systemFtpPageSearchList',
      payload: {
        jwt: jwt,
        ...queryFormState,
        reqPage: page,
        reqLimit: limit,
      },
    });
  }

  componentDidMount() {
    const { dispatch, queryFormState, ftpDataTableState: { page, limit }, authState: { jwt } } = this.props;

    // 发送请求, 初始化FTP管理页面
    dispatch({
      type: 'pages_home_system_ftp/systemFtpPageSearchList',
      payload: {
        jwt,
        ...queryFormState,
        reqPage: page,
        reqLimit: limit,
      }
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({ type: 'pages_home_system_ftp/allStateReset' });
  }
}

const mapStateToProps = (state) => {
  const systemFtpPageSearchListLoading = state.loading.effects['pages_home_system_ftp/systemFtpPageSearchList'];
  const systemFtpCreateLoading = state.loading.effects['pages_home_system_ftp/systemFtpCreate'];
  const { authState } = state.ucenter;
  const {
    queryFormState,
    addModalFormState,
    editModalFormState,
    ftpDataTableState,
  } = state.pages_home_system_ftp;

  console.log(ftpDataTableState);

  return {
    systemFtpCreateLoading,
    systemFtpPageSearchListLoading,

    ftpDataTableState,
    authState,
    queryFormState,
    addModalFormState,
    editModalFormState,
  }
}

export default connect(mapStateToProps)(Index);
